<template>
    <div>
        <h1>门店修改</h1>
        <table class="table table-bordered" border="1px">
            <tbody>
                <tr>
                    <td>房间号</td>
                    <td>
                        <input type="text" v-model="info.HouseNumber">
                    </td>
                </tr>
                <tr>
                    <td>房型类型名称</td>
                    <td>
                        <select v-model="info.HouseTypeName">
                            <option value="">请选择</option>
                            <option :value="a.HouseTypeName" v-for="a in hhh">{{ a.HouseTypeName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>房型图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="info.Photo" width="120px" height="100px" v-if="info.Photo">
                    </td>
                </tr>
                <tr>
                    <td>房型价格</td>
                    <td>
                        <input type="text" v-model="info.Money">
                    </td>
                </tr>
                <tr>
                    <td>房型面积</td>
                    <td>
                        <input type="text" v-model="info.Area">
                    </td>
                </tr>
                <tr>
                    <td>是否有窗</td>
                    <td>
                        <input type="radio" v-model="info.IsWin" :value="1"> 是
                        <input type="radio" v-model="info.IsWin" :value="0"> 否
                    </td>
                </tr>
                <tr>
                    <td>简介</td>
                    <td>
                        <textarea v-model="info.Desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>是否加床</td>
                    <td>
                        <input type="radio" v-model="info.IsBed" :value="1"> 是
                        <input type="radio" v-model="info.IsBed" :value="0"> 否
                    </td>
                </tr>
                <tr>
                    <td>是否含有早餐</td>
                    <td>
                        <input type="radio" v-model="info.Breakfast" :value="1"> 是
                        <input type="radio" v-model="info.Breakfast" :value="0"> 否
                    </td>
                </tr>
                <tr>
                    <td>最多入住人数</td>
                    <td>
                        <input type="text" v-model="info.PeopleCount">
                    </td>
                </tr>
                <tr>
                    <td>房型状态</td>
                    <td>
                        <input type="radio" v-model="info.State" :value="1"> 启用
                        <input type="radio" v-model="info.State" :value="0"> 停用
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button value="提交" class="btn btn-primary" @click="ok">提交</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();


let hhh: any = ref([])

let info: any = reactive({
    "Id": 0,
    "HouseNumber": "",
    "HouseTypeName": "",
    "Photo": "",
    "Money": '',
    "Area": '',
    "IsWin": 1,
    "Desc": "",
    "IsBed": 1,
    "Breakfast": 1,
    "PeopleCount": '',
    "State": 1,
})

onMounted(() => {
    bind();
    find();
})

const bind = () => {
    axios({
        url: 'https://localhost:7056/api/House/BindHType',
        method: 'get',
    })
        .then(res => {
            console.log(res.data);
            Object.assign(hhh.value, res.data);
        })
}

const find = () => {
    axios({
        url: 'https://localhost:7056/api/House/Find',
        method: 'get',
        params:{
            id:route.query.id
        }
    })
        .then(res => {
            console.log(res.data);
            Object.assign(info, res.data);
        })
}

const img = (e: any) => {
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData;
    f.append('file', obj);
    axios({
        url: 'https://localhost:7056/img',
        method: 'post',
        data: f
    })
        .then((res) => {
            info.Photo = res.data;
        })
}

const ok = () => {
    if (info.HouseNumber == "") {
        alert('房间号不能为空!');
        return;
    }
    if (info.HouseTypeName == "") {
        alert('房型类型名称不能为空!');
        return;
    }
    if (info.Photo == "") {
        alert('房型图片不能为空!');
        return;
    }
    if (info.Money == "") {
        alert('房型价格不能为空!');
        return;
    }
    if (info.Area == "") {
        alert('房型面积不能为空!');
        return;
    }
    if (info.Desc == "") {
        alert('简介不能为空!');
        return;
    } if (info.PeopleCount == "") {
        alert('最多入住人数不能为空!');
        return;
    }

    axios({
        url: 'https://localhost:7056/api/House/Update',
        method: 'put',
        data: info
    })
        .then(res => {
            if (res.data > 0) {
                alert('修改成功!');
                router.push('/houseshow');
                return;
            }
            else {
                alert('修改失败!');
                return;
            }
        })
}
</script>

<style scoped></style>